<template>
  <v-card outlined class="ma-5 control-block">
    <v-card-title>已关注领域</v-card-title>
    <v-card-text :key="update">
      <div>
        <v-chip class="ma-2" close v-for="(tag, index) in domainList" :key="index" @click:close="closeTag(index, tag.id)">
          {{ tag.topic }}
        </v-chip>
      </div>
    </v-card-text>
    <v-dialog v-model="dialog" width="60vw">
      <template v-slot:activator="{ on, attrs }">
        <v-btn class="ml-3 mt-3" color="primary" dark v-bind="attrs" v-on="on">添加领域</v-btn>
      </template>
      <v-card>
        <v-card-title>
          <span class="text-h5">选择一个领域</span>
        </v-card-title>
        <v-select class="ml-3" :items="primaryTopic" style="width: 20vw" label="主领域" v-model="selectItem"></v-select>
        <!-- <div>{{ chooseList["a"] }}</div> -->
        <div>
          <v-chip class="ma-2" v-for="(tag, index) in chooseList[selectItem]" :key="index" @click="addDomain(tag.topic)">
            {{ tag.topic }}
          </v-chip>
        </div>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" text @click="dialog = false"> 取消 </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <div class="mb-3"></div>
  </v-card>
</template>

<script>
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      update: 0,
      items: [],
      dialog: false,
      selectItem: "a",
      domainList: [],
      primaryTopic: [],
      chooseList: {},
      subscription_keyword: "",
    };
  },
  methods: {
    addDomain(content) {
      const that = this;
      axios
          .post(
              "/api/topic/",
              {
                topic: content,
                user: JSON.parse(localStorage.getItem("userinfo")).id,
              },
              {
                headers: {
                  Authorization: "Bearer " + localStorage.getItem("access"),
                },
              }
          )
          .then(function (response) {
            const data = response.data;
            console.log(data);
            that.loadList();
            that.loadDomain();
            that.update += 1;
            that.dialog = false;
            //   that.personData.following = data.count;
          });
    },
    closeTag(idx, domainId) {
      const that = this;
      this.update += 1;
      axios
          .delete("/api/topic/" + domainId + "/", {
            headers: {
              Authorization: "Bearer " + localStorage.getItem("access"),
            },
          })
          .then(function () {
            that.loadList();
            that.loadDomain();
            that.update += 1;
            //   that.personData.following = data.count;
          });
    },
    loadList() {
      const that = this;
      axios.get("/api/topic/").then(function (response) {
        const data = response.data;
        // console.log(data);
        that.domainList = data.results;
      });
    },
    loadDomain() {
      const that = this;
      axios.get("/api/topic/default/").then(function (response) {
        const data = response.data;
        console.log(data);
        that.primaryTopic = data.primary_topic;
        that.chooseList = data.topic;
      });
    },
  },
  mounted() {
    this.loadList();
    this.loadDomain();
  },
};
</script>
